<template>
  <div>
    <el-button @click="screenFullFn">全屏</el-button>
    <el-button @click="name='imgUp'">上传图片</el-button>
    <el-button @click="name='uploadExcel'">上传Excel</el-button>
    <component :is="name" />
    <hr>
    <div>
      <el-row type="flex" justify="center">

        <el-button @click="language='zh'">中文</el-button>
        <el-button @click="language='en'">English</el-button><br>
        <h3>{{ translate('helloword') }}</h3>
      </el-row>
    </div>
  </div>
</template>

<script>
import ScreenFull from 'screenfull'
export default {
  data() {
    return {
      name: 'imgUp',
      language: 'zh',
      dictionarise: {
        zh: {
          helloword: '你好 世界！'
        },
        en: {
          helloword: 'Hello Word！'
        }
      }
    }
  },
  methods: {
    translate(val) {
      const dic = this.dictionarise[this.language]
      return dic[val]
    },
    screenFullFn() {
      if (!ScreenFull.isEnabled) {
        this.$message.warning('浏览器不支持全屏，请更换浏览器')
        return false
      }
      ScreenFull.toggle()
    }
  }
}
</script>

<style>

</style>
